<template>
  <div v-if="resources.length > 0" class="resource-list">
    <div v-for="resource in resources" :key="resource.id">
      <div v-if="resource['resourceType']!=10" class="resource-info">
        <div class="thumbnail-container flex">
          <el-image
            :src=" url + resource.id + '.png'"
            fit="contain"
            class="thumbnail"
            lazy
          ></el-image>
        </div>
        <div class="right-side flex">
          <div class="info" style="width: 500px">
            <resource-link :resource="resource" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></resource-link>
            <div class="file-name">
              <span v-if="resource['url'] == null"></span>
              <span v-else>
                <span>{{ `${resource['resourceName']}` }}</span>
                <span>{{ `.${resource['url'].split('.').slice(-1)}` }}</span>
              </span>
            </div>
            <!-- 资源包含的知识点暂不显示 -->
            <div v-if="false">
              <div v-if="resource['entityList'] !== null" class="entity-list">
                <div
                  v-for="(entity, entityIndex) in resource['entityList']"
                  :key="entityIndex"
                >
                  <el-button
                    class="entity-btn"
                    type="text"
                    size="mini"
                    @click="searchEntity(entity)"
                  >
                    {{ entity }}
                  </el-button>
                </div>
              </div>
            </div>
            <div class="extra">
              <div class="extra-info">
                <i class="el-icon-time"></i>
                {{ resource['updateTime'] }}
              </div>
              <div class="extra-info">
                <i class="el-icon-download"></i>
                {{ resource['download'] }} 下载
              </div>
            </div>
          </div>
          <div class="operations">
            <div class="full-width">
              <download-button
                :resourceID="resource['id']"
                :resource="resource"
                :size="'medium'"
              ></download-button>
            </div>
            <div class="full-width">
              <add-to-package-button
                :resourceType="'resource'"
                :resourceID="String(resource.id)"
                :size="'medium'"
              ></add-to-package-button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="resource['resourceType']===10" class="resource-info">     
            <div class="thumbnail-container flex">
                <el-image
                :src=" url + resource.id + '.png'"
                fit="contain"
                class="thumbnail"
                lazy
                ></el-image>
            </div>
          <div class="info" style="width: 580px">
            <div class="img-name">图片主题：{{resource['resourceName']}}</div>
            <div class="extra">
              <div class="extra-info">
                <i class="el-icon-time"></i>
                {{ resource['updateTime'] }}
              </div>
            </div>
          </div>
          <div class="operations">
            <div class="full-width">
              <download-button
                :resourceID="resource['id']"
                :resource="resource"
                :size="'medium'"
              ></download-button>
            </div>
            <div class="full-width-img">
              <add-to-package-button
                :resourceType="'resource'"
                :resourceID="String(resource.id)"
                :size="'medium'"
              ></add-to-package-button>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import ResourceLink from '@/components/ResourceLink'
import DownloadButton from '@/components/Buttons/DownloadButton'
import AddToPackageButton from '@/components/Buttons/AddToPackageButton'
import merge from 'webpack-merge'
import { globalUrl } from '@/config'
export default {
  name: 'ResourceListWithInfo',
  components: { ResourceLink, DownloadButton, AddToPackageButton },
  props: {
    resources: Array
  },
  data() {
    return {
      url: globalUrl.coverUrl
    }
  },
  methods: {
    searchEntity(entity) {
      this.$router.push({
        query: merge(this.$route.query, {
          q: entity,
          type: 0,
          page: 1,
          sort: 0
        })
      })
    }
  }
}
</script>

<style scoped>
.resource-info {
  /*height: 190px;*/
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.resource-info .right-side {
  justify-content: space-between;
  width: 100%;
}

.thumbnail-container {
  /*height: 100%;*/
  align-items: center;
  justify-content: center;
}

.thumbnail {
  width: 100px;
  height: 100px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin-left: 1rem;
}

.entity-list {
  /* 这里的间距要减去按钮设置的间距，但不完全减 */
  margin-top: calc(0.5rem - 5px);
  display: flex;
  flex-wrap: wrap;
}

.entity-list div {
  margin-right: 10px;
  margin-top: 10px;
}

.extra {
  display: flex;
  margin-bottom: 0.6rem;
  /*position: absolute;*/
  /*bottom: 0;*/
  min-width: 220px;
}

.extra .extra-info {
  color: #909399;
  font-size: 0.9rem;
  line-height: 1rem;
  margin-right: 1rem;
}

.operations {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 0.8rem;
  justify-content: center;
  align-items: center;
}

.operations button {
  margin-bottom: 12px;
}

.file-name {
  color: #909399;
}

.resource-name {
  padding-top: 0.6rem;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer
}
.img-name{
  padding-top: 0.6rem;
  font-size: 1.1rem;
  font-weight: bold;
}
.resource-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
}

.name-in-url {
  color: #555555;
  margin-bottom: 0.6rem;
}

.entity-btn {
  color: #555555;
}

/* 测试 */
.entity-list {
  margin-top: -0.6rem;
}
.img{
  height: 100%;
  width:100%;
}
.img-picture{
  width: 30%;
}
.full-width-img{
    margin-top: 0.6rem;
  }
</style>
